<template>
  <div class="qumap" v-show="isQuxian">
    <div class="biaoti">廊坊市-{{areaCity.name}}监督数据</div>
    <div class="shi">
      <div>
        辖区
        <br />
        {{areaCity.name}}
      </div>
      <div>
        <div>单位数</div>
        <div>{{qudata.danweishu}}</div>
      </div>
      <div>
        <div>监督员</div>
        <div>{{qudata.jianduyuan}}</div>
      </div>
      <div>
        <div>案件数</div>
        <div>{{qudata.anjianshu}}</div>
      </div>
    </div>
    <div id="qumap">加载中</div>
    <div class="back" @click="setIsQuxian">
      <i class="iconfont icon-gongxiangtubiaozhuangtaileicaozuolei59"></i>
      <span>返回上级</span>
    </div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getMap, getQuXianJianDuShu } from "@/api/gaikuang.js";

export default {
  name: "QuXianMap",
  data() {
    return {
      qudata: { danweishu: 1234, jianduyuan: 40, anjianshu: 30 },
      areaCity: { name: "文安县", code: "131026" },
      isQuxian: false
    };
  },
  methods: {
    async getData() {
      this.qudata = {
        jianduyuan: "加载中",
        danweishu: "加载中",
        anjianshu: "加载中"
      };
      // try {
      var json = (
        await getQuXianJianDuShu({
          code: this.areaCity.code,
          year: this.$store.state.YEAR
        })
      ).data.data[0];
      // } catch (error) {
      //   var json = { jianduyuan: 32, danweishu: 2198, anjianshu: 463 };
      // }
      this.qudata = json;
    },
    setIsQuxian() {
      Bus.$emit("isQuxian", false);
      Bus.$emit("AreaItem", { name: "廊坊市", code: "131000" });
    },
    async dramMap(num = "131025", isQuxian = true) {
      this.qu_map = null;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("qumap"));
      this.qu_map = myChart;

      let mapData = await getMap({
        code: num,
        isQuxian: isQuxian,
        year: this.$store.state.YEAR
      });

      this.$echarts.registerMap("qu", mapData.data);
      var option = {
        geo: {
          map: "qu",
          zoom: 1,
          itemStyle: {
            areaColor: "#00D8FF",
            borderColor: "#fff",
            borderWidth: 2
          },
          label: {
            normal: {
              color: "#fff",
              show: true,
              position: "inner",
              fontSize: isQuxian ? 20 : 16
            }
          },

          regions: [
            //对不同的区块进行着色
            {
              name: "三河市", //区块名称
              itemStyle: {
                areaColor: "#605bd3"
              }
            },
            {
              name: "大厂回族自治县",
              itemStyle: {
                normal: {
                  areaColor: "#cf5eb6"
                }
              }
            },
            {
              name: "香河县",
              itemStyle: {
                normal: {
                  areaColor: "#9f7a7a"
                }
              }
            },
            {
              name: "安次区",
              itemStyle: {
                normal: {
                  areaColor: "#4986fb"
                }
              }
            },
            {
              name: "霸州市", //区块名称
              itemStyle: {
                areaColor: "#4ca98c"
              }
            },
            {
              name: "大城县",
              itemStyle: {
                normal: {
                  areaColor: "#00cbff"
                }
              }
            },
            {
              name: "文安县",
              itemStyle: {
                normal: {
                  areaColor: "#e5747a"
                }
              }
            },
            {
              name: "永清县",
              itemStyle: {
                normal: {
                  areaColor: "#70c55d"
                }
              }
            },
            {
              name: "固安县",
              itemStyle: {
                areaColor: "#f7c437"
              }
            },
            {
              name: "广阳区",
              itemStyle: {
                normal: {
                  areaColor: "#ee7c36"
                }
              }
            }
          ]
        },
        emphasis: {
          show: true,
          itemStyle: {
            borderColor: "green"
          }
        }
      };
      myChart.setOption(option);
      myChart.resize();
    },
    suijishu(num) {
      if (num > 1) {
        let arr = [];
        for (let i = 0; i < num; i++) {
          arr.push((Math.random() * 100).toFixed(0));
        }
        return arr;
      } else {
        return (Math.random() * 100).toFixed(0);
      }
    }
  },
  mounted() {},
  created() {
    this.getData();
    Bus.$on("changeSize", e => {
      // this.qu_map.resize();
      this.dramMap();
    });
    Bus.$on("isQuxian", e => {
      this.isQuxian = e;
    });
    Bus.$on("AreaItem", e => {
      if (this.isQuxian) {
        this.areaCity = e;
        this.dramMap(e.code);
        this.getData();
      }
    });
  }
};
</script>

<style scoped lang="less">
.qumap {
  grid-row: 1 / span 5;
  border: 0.0625rem solid #2c4daa;

  .biaoti {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
  }

  .shi {
    margin-top: 2rem;
    display: flex;
    justify-content: space-around;
    text-align: center;

    & > div:first-of-type {
      font-size: 2rem;
    }

    & > div:nth-of-type(n + 2) {
      width: 6rem;
      height: 6rem;
      border: 0.2rem solid #04aee1;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      padding: 2% 0;
      justify-content: space-evenly;

      div:last-of-type {
        font-size: 1.2rem;
        color: #04aee1;
      }
    }
  }

  #qumap {
    width: 100%;
    height: calc(100% - 14.4rem);
    margin-top: 0.4rem;
  }

  .back {
    margin-left: 2.4rem;
    display: inline-block;
    position: relative;
    z-index: 9;
    font-size: 1.4rem;

    .iconfont {
      font-size: 1.4rem;
      padding-right: 0.4rem;
    }

    &:hover {
      cursor: pointer;
    }
  }
}
</style>